<template>
    <el-container class="certificate-config">
        <div class="certificate-config-header">
            <el-button size="small" type="primary" @click="openDialog('add')">添加证书模板</el-button>
        </div>

        <el-main class="certificate-config__content">
            <el-table :data="datas" style="width: 100%" align="center" header-align="center" class="table-container">

                <el-table-column label="证书名称" prop="certificateName" center />


                <el-table-column label="证书编号生成规则" center>
                    <template slot-scope="scope">
                        <el-button type="text" size="small">{{ scope.row.certificateNamePrefix}}</el-button>
                    </template>
                </el-table-column>


                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)"
                            v-if="!scope.row.isActive">删除模板</el-button>
                        <el-button size="small" type="info" @click="openDialog('edit', scope.row)">修改模板</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </el-main>
        <dialog-edit :visible.sync="dialogVisible" v-if="dialogVisible" @refresh="refresh" ref="edit"></dialog-edit>

    </el-container>
</template>

<script>
import dialogEdit from "./components/edit.vue"
import { getCertificateList, findRules } from "../utils/certificate"

export default {
    name: "certificate-configList",
    components: {
        dialogEdit
    },

    data() {
        return {
            datas: [],
            findRules,
            dialogVisible: false,

        };
    },


    created() {
        this.handleDatas();
    },
    methods: {

        async handleDatas() {
            const loading = this.$loading();
            this.datas = await getCertificateList();
            loading.close();
        },
        refresh() {
            this.handleDatas();
        },


        handleDelete(row) {
            this.$confirm("确定要移除此证书模板？", "", {
                distinguishCancelAndClose: true,
                confirmButtonText: "确认",
                cancelButtonText: "取消",
            }).then(async () => {


                const { code } = await this.$fetch.post(
                    "/api/certificate-config/delete",
                    row
                );
                if (code === 0) {
                    this.$message.success("此证书模板已移除");
                }
                this.refresh();
            });
        },


        openDialog(type, row) {
            this.dialogVisible = true;
            this.$nextTick(() => {
                this.$refs.edit.init(type, row);
            })
        }


    },
};
</script>

<style scoped lang="scss">
.certificate-config {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);


    .certificate-config-header {
        height: 40px;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .certificate-config__content {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow: auto;
        padding-bottom: 0;

        .table-container {
            flex: 1;
            overflow: hidden;
            overflow-y: auto;
        }

    }


}
</style>
